<template>
	<view>
		<view v-if="ad_menu.background.path != undefined">
			<view class="good-header" :style="{backgroundImage:`url(${ad_menu.background.path})`}">
				<view class="goods-header-size"></view>
				<view class="goods-header-search" @click="goods_search()">
					<input class="uni-input" disabled confirm-type="search" placeholder="搜索你想要的商品" />
				</view>
			</view>
		</view>
		
		<!-- 轮播图 -->
		<view class="carousel" v-if="ad_menu.carousel && ad_menu.carousel.length>0">
			<swiper :style="{height:carouselheight+'px'}" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" class="topic-swiper">
				<block v-for="(item,index) in ad_menu.carousel" :key="index">
					<swiper-item @click="navToRuter(item.route)">
						<image :src="item.path" mode="widthFix" lazy-load></image>
					</swiper-item>
				</block>
			</swiper>
		</view>
		
		<!--菜单-->
		<view class="menu" v-if="ad_menu.menu && ad_menu.menu.length>0">
			<view class="goods-header-ad-menu" v-for="(items,index) in ad_menu.menu" @click="navToRuter(items.route)">
				<image :src="items.path" mode="widthFix" lazy-load></image>
				<view>{{items.name}}</view>
			</view>
		</view>
		
		<!--活动广告-->
		<view class="ad-menu" v-if="ad_menu.ad && ad_menu.ad.length>0">
			<view class="goods-header-ad" v-for="(items,index) in ad_menu.ad">
				<view class="goods-header-main" v-for="(adli,adk) in items.list" @click="navToRuter(adli.route)">
					<image :src="adli.path" mode="widthFix" lazy-load></image>
				</view>
			</view>
		</view>
		
		
		<view>
			<!-- 将导航栏数据放入navData中,默认为{[name: 'XXX']}，可到componets/Nav.vue中修改 -->
			<goodsNav :navData="navData" @changeTab='changeTab' :changeNavIndex="current"></goodsNav>
			<!-- 列表 -->
			<view class="uni-tab-bar">
				<swiper class="swiper-box" :autoplay="false" :duration="200" @change="changeSwiper" :style="{height:swiperheight+'px'}" :current="tabIndex">
					<swiper-item v-for="(items, index) in navData">
						<goodsList :dataList="dataList" :index="current"></goodsList>
						<uni-load-more :status="more"></uni-load-more>
					</swiper-item>
				</swiper>
			</view>
		</view>
		
		<backTop :src="backTop.src"  :scrollTop="backTop.scrollTop"></backTop>
		
	</view>
</template>

<script>
	import uniLoadMore from '@/components/uni-load-more/uni-load-more'
	import backTop from '@/components/back-top/back-top';
	import tools from '../../common/tools'
	import apiindex from '../../common/api/index'
	import apicollege from '../../common/api/college'
	import goodsNav from '../../components/goods/goods-nav'
	import goodsList from '../../components/goods/goods-list'
	export default {
		data() {
			return {
				more:'loading',
				//返回顶部
				backTop: {
					src: '../../static/buytao/top.png',
					scrollTop: 0
				},
				scrollTop: 0,
				//结束返回顶部
				
				
				carouselheight:120,
				swiperheight:150,//屏幕高度
				current: 0,
				refreshering: true,
				tabIndex:0,//tab索引
				// 导航栏数据
				navData: [],
				// 分类数据
				dataList:[],
				//轮播广告接口
				ad_menu:{
					ad:[],
					carousel:[],
					background:{},
					menu:[],
				},
				gl_params:{
					site:'haodanku',
					category_id:1,
					page:1,
					page_size:10
				}
			}
		},
		onLoad() {
			uni.showNavigationBarLoading()
			this.goodsCategory({type:'index'});
			this.homejd({type:'taobao'});
		},
		components:{
			apiindex,
			goodsNav,
			goodsList,
			apicollege,
			backTop,
			uniLoadMore
		},
		
		//返回顶部，获取当前的滚动条位置
		onPageScroll(e) {
			this.backTop.scrollTop = e.scrollTop;
		},
		
		//上拉加载更多
		onReachBottom:function() {
			this.goods_more_search()
		},
		
		methods: {
			
			//上拉加载更多
			goods_more_search(){
				
				this.gl_params.page=this.gl_params.page+1
				apiindex.goods_list(this.gl_params).then(res =>{
					//获取数据
					if(res.code == 1){
						if(res.data.length>0){
							this.more='loading'
							// for(var i=0;i<res.data.length;i++){
							// 	this.dataList.push(res.data[i]);
							// }
							this.dataList = this.dataList.concat(res.data);//合并数组
							let current_height = (res.data.length) * 150
							this.swiperheight = this.swiperheight+current_height
						}else{
							this.more='noMore'
						}
					}else{
						this.more='noMore'
					}
				}).catch(res =>{
					this.suggestion_flag=false
				})					
			},
			
			//商品搜索
			goods_search(items){
				uni.navigateTo({
					url:'../../pages/search/index'
				})
			},
			
			//路由
			navToRuter(route){
				tools.router(route);
			},
				
			getMsgFormSon(data){
				console.log(data)
			},
				
			//跳转商品详情
			goodsdetail(goods){				
				uni.navigateTo({
					url: '../product/product?site='+goods.Site+"&goods_id="+goods.GoodsId,
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},		
			
			//商品分类
			goodsCategory(params={}){
				apiindex.goodsCategory(params).then(res =>{
					res.data.splice(0,1);
					this.navData=res.data;
					this.gl_params.category_id=this.navData[this.current].category_id;
					this.goods_list(this.gl_params);
				}).catch(cateres =>{
					
				});
			},
			
			
			//商品分类
			homejd(params={}){
				apicollege.homejd(params).then(res =>{
					this.ad_menu.ad=res.data.ad
					this.ad_menu.carousel=res.data.carousel
					this.ad_menu.background=res.data.background
					this.ad_menu.menu=res.data.menu
				}).catch(res =>{
					
				});
			},
			
			//商品列表
			goods_list(params={}){
				apiindex.goods_list(params).then(res=>{
					this.dataList = res.data;
					this.swiperheight = (res.data.length) * 150+50
					uni.hideNavigationBarLoading()
				}).catch(res=>{
					
				});
			},
			
			//路由
			navToRuter(route){
				tools.router(route);
			},
			
			// 选择导航栏事件
			changeTab(index){
				this.tabIndex = index
				this.gl_params.category_id=this.navData[index].category_id
				this.dataList = []
				this.gl_params.page=1
				this.swiperheight=150
				this.goods_list(this.gl_params);
			},
			//点击切换
			changTab(index){
				this.tabIndex = index;
				this.gl_params.category_id=this.navData[index].category_id
				this.dataList = []
				this.gl_params.page=1
				this.swiperheight=150
				this.goods_list(this.gl_params);
			},
			//滑动切换
			tabChange(e){
				this.current = e.detail.current;
				this.gl_params.category_id=this.navData[e.detail.current].category_id
				this.dataList = []
				this.gl_params.page=1
				this.swiperheight=150
				this.goods_list(this.gl_params);
			},
			loadmore(){
				//上拉加载
			},
			// 滑动内容页事件
			changeSwiper(e) {
				this.current = e.detail.current
				this.$emit('changeNavIndex', e.detail.current)
			},
			// 下拉刷新事件
			refresher() {
				var that = this
				that.refreshering = true
				console.log('下拉刷新')
				setTimeout(function() {
					that.refreshering = false
					console.log('刷新成功')
				},2000)
			}
			
			
		}
	}
</script>

<style scoped>
	/**轮播图*/
	.carousel{
		width:98%;
		margin:20upx auto;
	}
	.carousel .topic-swiper{
		width:100%;
	}
	.topic-swiper>image{
		width:100%;
	}
	uni-image{
		width:100%;
	}
	.good-header{
		width:100%;
		height:350upx;
		background-size: 100% 100%;
	}
	.goods-header-main{
		width:100%;
		flex:1;
		background-color:#FFFFFF;
	}
	/**轮播图结束**/
	
	/**商品详情**/	
	.goods-index-detail{
		width:96%;
		display: flex;
		flex-direction:row;
		flex-wrap:wrap;
		white-space:nowrap;
		padding:2%;
	}
	.goods-index-detail>view:nth-child(odd){
		margin-right:2%;
	}
	.s-list-detail{
		width:49%;
		margin-bottom:20upx;
	}
	.t-list-img image{
		width:100%;
		height:200upx;
		margin-top:10upx;
		border-radius:15upx;
	}
	.goods-index-title{
		width:100%;
		display:flex;
	}
	.goods-index-title>image{
		width:50upx;
		height:50upx;
		display:inline-block;
		position:relative;
	}
	.goods-index-title>text{
		display:block;
		padding-left:10upx;
		width:80%;
		white-space: nowrap; /* 因为设置了block，所以需要设置nowrap来确保不换行 */
		overflow: hidden; /* 超出隐藏结合width使用截取采用效果*/
		text-overflow: ellipsis; /* 本功能的主要功臣，超出部分的剪裁方式 */
		-o-text-overflow: ellipsis; /* 特定浏览器前缀 */
		text-decoration: none; /* 无用 */
	}
	.goods-index-money{
		margin-top:20upx;
	}
	.goods-index-money>text:first-child{
		background:#ffd9d9;
		font-size:15upx;
		padding:7upx 15upx;
		color:#F76260;
		border-radius:5upx;
	}
	.goods-index-money>text:last-child{
		background:#8A6DE9;
		font-size:15upx;
		padding:7upx 15upx;
		color:#fff;
		margin-left:20upx;
		border-radius:10upx;
	}
	.goods-index-price{
		color:#F76260;
	}
	.goods-index-price>text:first-child{
		font-size:40upx;
	}
	.goods-index-price>text:last-child{
		color:#ccc;
		margin-left:20upx;
	}
	.goods-index-shop{
		font-size:20upx;
		color:#ccc;
	}
	.goods-index-shop>text:last-child{
		margin-left:20upx;
	}	
	/**商品详情结束**/
	
	.goods-header-search{
		width:90%;
		margin:0 auto;
	}
	.goods-header-search>input{
		border-radius:20upx;
	}
	.goods-header-size{
		width:100%;
		height:220upx;
	}
	.goods-header-ad{
		padding:20upx 0;
		width:100%;
		display: flex;
		flex-direction: row;
		white-space: nowrap;
		justify-content:left;
		flex-wrap:wrap;
		border-radius:20upx;
	}
	.goods-header-main>image{
		width:100%;
	}
	.menu{
		padding:0 2% 40upx 2%;
		width:96%;
		display:flex;
        flex-direction: row;
        flex-wrap: wrap;		
	}
	.goods-header-ad-menu{
		width:14%;
		padding:10upx 3%;
	}
	.goods-header-ad-menu>view{
		text-align: center;
		font-size:25upx;
	}
	.goods-header-main-menu>image{
		width:100%;
	}
</style>
